<template>
  <div id="l_searchStudent">
    <h2>搜索学生</h2>
    <table>
      <tr>
        <td>
          <select name="" id="" v-model="search_type">
            <option value="年龄">年龄</option>
            <option value="性别">性别</option>
            <option value="姓名">姓名</option>
          </select>
        </td>
        <td><input type="text" v-model="search_text" /></td>
      </tr>

      <tr>
        <td colspan="2"><button id="modify_student" @click="search_student">确认搜索</button></td>
      </tr>
    </table>
  </div>
</template>

<script>
import bus from "./bus.js";
export default {
    data(){
        return{
search_type:"年龄",
        search_text:""
        }
        
    },
    methods:{
search_student(){
   bus.$emit('search',this.search_type,this.search_text);
}
    }
};
</script>

<style scoped>
#l_searchStudent {
  box-sizing: border-box;
  width: 310px;
  height: 210px;
  background-color: white;
  border-radius: 5px;
  padding: 15px;
}
tr {
  height: 35px;
}
td {
  font: 16px;
  font-weight: 500;
  height: 35px;
  line-height: 35px;
}
tr td:nth-child(2) {
  padding-left: 10px;
}
select {
  width: 70px;
  outline: none;
  border: 1px solid #ddd;
  border-radius: 5px;
    height: 25px;
}
#modify_student {
  width: 100%;
  border: 1px solid #ddd;
  height: 30px;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
}
input {
  outline: none;
  border: 1px solid #ddd;
  height: 25px;
  border-radius: 5px;
}
</style>